<template>
    <view class="page-content" style=" padding-top: 50px;height:calc(50vh + 730rpx);overflow-y:auto;">
         <view @click="choseWallet" class="view flex-row align-center justify-between w104 h30 m-t-20 m-b-20 m-l-20" style="background:#6781FF;border-radius: 15px;">
                <view class="fz-12 c-fff p-l-10 ">{{Object.keys(defaultWallet).length > 0 ? defaultWallet.name : '未创建钱包'}}</view>
                    <view class="w20 h20 bg-fff view align-center justify-center m-r-5" style="border-radius:50%;">
                        <uni-icons type="right" size="12" color="#748FAC"/>
                    </view>
                </view>  
            <view>
            <uni-swiper-dot :info="list" :current="current" field="content"  class="m-r-20 m-l-20 m-b-14 h-210">
                <swiper class="swiper-box" >
                    <swiper-item v-for="(item ,index) in list" :key="index">
                        <view class="swiper-item">
                            <image :src="item.src" style="width:100%;border-radius:19px;overflow:hidden;" class="h166">
                        </view>
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
        </view>
        <!--<view v-if="checkOldDone == 0" class="tips error m-l-20 m-r-20 m-b-20">
        	请老用户尽快确认旧资产。确认后会通过合约统一发放（含贡献池数据）。
        	<el-button @click="gotoCheck" class="p-l-30 m-t-20" block style="border-radius: 12px !important;" type="primary">前往确认</el-button>
        </view>
		<view v-else-if="checkOldDone == 1" class="tips success m-l-20 m-r-20 m-b-20">
			您已完成确认。旧资产已在空投中。
		</view>-->
        <view class="m-b-12">
            <view class="h69 join-pool bg-cover m-b-12 m-l-20 m-r-20 view flex-row align-center justify-end p-r-10" style="border-radius:24rpx;" v-for="(item,index) in poolList" :key="index">
                <el-button class="w100 h34 view align-center justify-center " block style="border-radius: 12px !important;display:flex !important;font-size:24rpx; color:#6781FF" @click="toPool(item)" >{{item.name}}</el-button>
            </view>
        </view>

        <view class="p-l-20 p-r-20 m-t-30">
            <view class="view flex-row align-center m-b-12">
                <view class="bg_678 h23 w3 m-r-8"></view>
                <view class="c_0a1 fz-16">个人贡献值排行榜</view>
            </view>
            <view>
                <view class="view align-center justify-center">
                    <uswitch class="w266 h42 m-b-12 " :switchList="['CHB贡献值', 'DSX贡献值']" :w="'500rpx'" :h="'84rpx'" @change="changeSwitch" />
                </view>
                
                <view style="border-radius:19px;height:600px;overflow-y:auto;" class="bg-fff p-t-20 p-b-20 ">
                    <block v-if="ranList.length > 0">
                        <view class="p-l-20 p-r-20 view flex-row align-center justify-between m-b-12" v-for="(item,index) in ranList" :key="index" >
                            <view class="view flex-row align-center">
                                <view class="c_0a1 fz-14 m-r-20">{{ index + 1 }}</view>
                                <view>
                                    <view class="c_0a1 fz-14">贡献值</view>
                                    <view class="c-9d9 m-t-2 fz-12">{{ item.calculate }}</view>
                                </view>
                            </view>
                            
                            <view class="view align-end ">
                                <view class="m-b-2 c_0a1 fz-14">地址</view>
                                <view class="c-9d9 fz-12">{{ item.address | pingm}}</view>
                            </view>
                        </view>
                    </block>

                    <view class="view align-center justify-center" v-else>
                        <image src="/static/img4/341234.png" class="w90 h90"/>
                        <view class="fz-12 c_999 text-center m-r-10 m-t-10">暂无榜单</view>
                    </view>
                </view>
                
            </view>
        </view>
        
    </view>
</template>

<script>
import navbar from '@/components/uni-nav-bar'
import uniIcons from '@/components/uni-icons/uni-icons'
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot'
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput'
import elButton from '@/components/el-button/el-button'
import noData from '@/components/noData/noData'
import uswitch from '@/components/uni-switch/index.vue'
import { getPoolList, getRankingList, commitpledge, registerNFTAddress } from '@/apis/pool'
import { findByAddress } from '@/apis/wallet.js';

import { mapState } from 'vuex'
let _this
export default {
    components: {
      navbar,
      uniEasyinput,
      uniIcons,
      uniSwiperDot,
      elButton,
      uswitch,
      noData
	},
	computed: {
		...mapState(['defaultWallet', 'isNftUser']),
	},
    data() {
        return {
        chb_id: '',
        dsx_id: '',
        poolList: [],
        switch_val: true,
        current: 0,
		checkOldDone: 0,
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500, 
        ranList: [],   
        list: [
            {
              src: "https://hainanshenlong.oss-cn-hangzhou.aliyuncs.com/banner/shequ-1.jpg",
            },
            {
              src: "https://hainanshenlong.oss-cn-hangzhou.aliyuncs.com/banner/shequ-2.jpg",
            },
            {
              src: "https://hainanshenlong.oss-cn-hangzhou.aliyuncs.com/banner/shequ-3.jpg",
            },
        ],
        }
    },
	async onShow() {
		//'0x13b41bcd4be6b313700df596033863cd6742abde';
		//'0xb88560376b1f4e49ec378ce7773535d3d3e4e4b8';
		//this.defaultWallet.address = '0x13b41bcd4be6b313700df596033863cd6742abde';
      await this.runInAddress()
	  await this.getRollList()
      await this.getRanking()
	  await this.checkOldUser()
	},
    filters: {
        pingm(val) {
            return _this.app.plusXing(val,5,5)
        }
    },
    beforeCreate () {
        _this = this;
    },
    methods: {
        // 插入地址
        async runInAddress() {
			//这里任何时候都可以调取插入地址，要考虑到切换钱包的问题
			const res = await registerNFTAddress()
            const isNftUser = uni.getStorageSync('isNftUser');
            if (isNftUser != 1) {
                //const res = await registerNFTAddress()
                if (res.code == 0) {
                    uni.setStorageSync('isNftUser',1);
                }
            }
        },
        async mining() {
            const res = await commitpledge()
        },
		async checkOldUser(){
			let status = await findByAddress(this.defaultWallet.address);
			//console.log('status',status);
			if(status.data != 0){
				//用户已经存在了
				this.checkOldDone = 1;
			}
		},
        toPool(item) {
			console.log('item',item)
			if(item.id == 1){
				uni.navigateTo({
				    url: `/pages/dig/orePool/mining?id=${item.id}&symbol=${item.symbol}&min_num=${item.min_num}&min_nft=${item.min_nft}`
				})
			}else{
				uni.navigateTo({
				    url: `/pages/dig/community/index`,
				})
			}
        },
        changeSwitch(val) {
            this.switch_val = val
            this.getRanking()
        },
        // 获取贡献
        async getRanking() {
            if (this.switch_val) {
               const res = await getRankingList({basic_id: this.chb_id})
               this.ranList = res.data
            } else {
               const res = await getRankingList({basic_id: this.dsx_id})
               this.ranList = res.data
            }
            
        },
        // 获取矿池列表
        async getRollList() {
            let res = await getPoolList()
            res.data[1].name = '前往CHB贡献池'
            res.data[0].name = '前往DSX贡献池'
            this.chb_id = res.data[1].id
            this.dsx_id = res.data[0].id
            this.poolList = res.data
        },
		gotoCheck(){
			uni.navigateTo({
			  url: "/pages/home/check"
			});
		},
		choseWallet(){
			uni.navigateTo({
			  url: '/pages/wallet/walletManager/index'
			});
		}
    }
    
};
</script>

<style lang="scss" scoped>
.bar1-title {
    color:#3C3C3C;
    font-size: 32rpx;
}

page {
    background: #F6F6F6;
}
::v-deep.page-content {
  height: 100%;
  .uni-swiper-dots-horizontal {
      bottom: 15px;
      .uni-swiper-dot {
        width: 4px;
        height: 4px;
        border-radius: 4px;
        transition: width 0.3s;
        background-color: #D8D8D8;
        &-active {
          width: 15px;
          background-color: #6781FF;
        }
      }
    }
}
.join-pool:nth-child(1){
	background-image:url('../../../static/img4/dig-chb.png');
}
.join-pool:nth-child(2){
	background-image:url('../../../static/img4/dig-dsx.png');
}
.left-bar-item {width: 100%;height:68px;display: flex;align-items: center;justify-content: center;}
.left-bar-item .image{
    width:30px;
    height: 30px;
}
.left-bar-item.active {
    background: #F6F6F6;
}
.btn-c {
    display: block;
    margin-top:56rpx;
    width: 100%;
    height: 96rpx;
    line-height: 78rpx;
    font-size: 40rpx;
}
.zuji-item {background: #fff;border-radius: 10px;color:#6781FF;}
.fix-bottom {width: 100vw;height: 100px;background: #fff;bottom: 0;left: 0;padding-top:32rpx;position: fixed;}
.dig-middle-button{  
	width: 30px;
	height: 30px;
	border-radius: 100%;
    display: flex;
    color: rgb(255, 255, 255);
    font-size: 24px;
    background-color: rgb(103, 129, 255);
    position: absolute;
    left: 50%;
	justify-content: center;
    margin-left: -15px;
    margin-top: 10px;
    align-items: end;}
</style>
